{% extends "home/common.html" %}
{% block content %}
	<!-- //网站头部 -->
    <div id="mr-mainbody" class="container mr-mainbody">
        <div class="row">
            <!-- 页面主体内容 -->
            <div id="mr-content" class="mr-content col-xs-12">
                <div id="mrshop" class="mrshop common-home">
                    <div class="container_oc">
                        <div class="row">
                            <div  class="col-sm-12">
                                <h1>我的购物车</h1>
                                <!-- 显示购物车中的商品 -->
                                <div class="table-responsive cart-info">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <td class="text-center image">商品图片</td>
                                                <td class="text-left name">商品名称</td>
                                                <td class="text-left quantity">数量</td>
                                                <td class="text-right price">单价</td>
                                                <td class="text-right">总计</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <!-- 遍历购物车中的商品并显示 -->
                                            {% for item in cart %}
                                             <tr>
                                                <td class="text-center image" width="20%">
                                                    <a href="{{url_for('home.goods_detail',id=item.goods.id)}}">
                                                    <img width="80px" src="{{url_for('static',filename='images/goods/'+item.goods.picture)}}"> </a>
                                                </td>
                                                <td class="text-left name">
                                                    <a href="{{url_for('home.goods_detail',id=item.goods.id)}}">{{item.goods.name}}</a>
                                                </td>
                                                <td class="text-left quantity">{{item.number}}件</td>
                                                <td class="text-right price">{{item.goods.current_price}}元</td>
                                                <td class="text-right total" value="{{item.goods.current_price * item.number}}">
                                                    {{item.goods.current_price * item.number}}元
                                                </td>
                                            </tr>
                                            {% endfor %}
                                            <!-- //遍历购物车中的商品并显示 -->
                                        </tbody>
                                    </table>
                                </div>
                                <!-- //显示购物车中的商品 -->
                                <!-- 显示总计金额  -->
                                <div class="row cart-total">
                                    <div class="col-sm-4 col-sm-offset-8">
                                        <table class="table table-bordered">
                                            <tbody>
                                                <tr >
                                                <span>
                                                    <strong>总计:</strong>
                                                    <p id="total_price"></p>
                                                </span>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!-- //显示总计金额  -->
                            </div>
                        </div>
                        <!-- 填写物流信息 -->
                        <div class="row">
                            <div id="content_oc" class="col-sm-12">
                                <h1>物流信息</h1>
                                <!-- 填写物流信息的表单 -->
                                <form action="{{url_for('home.cart_order')}}" method="post" id="myform">
                                    <div class="table-responsive cart-info">
                                        <table class="table table-bordered">
                                            <tbody>
                                                <tr>
                                                    <td class="text-right" width="20%">收货人姓名：</td>
                                                    <td class="text-left quantity">
                                                        <div class="input-group btn-block" style="max-width: 400px;">
                                                            <input type="text" id="recevieName" name="recevie_name" size="10" class="form-control">
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="text-right">收货人手机：</td>
                                                    <td class="text-left quantity">
                                                        <div class="input-group btn-block" style="max-width: 400px;">
                                                            <input type="text" id="tel" name="recevie_tel" size="10" class="form-control">
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="text-right">收货人地址：</td>
                                                    <td class="text-left quantity">
                                                        <div class="input-group btn-block" style="max-width: 400px;">
                                                            <input type="text" id="address" name="recevie_address" size="1" class="form-control">
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="text-right">备注：</td>
                                                    <td class="text-left quantity">
                                                        <div class="input-group btn-block" style="max-width: 400px;">
                                                            <input type="text" name="remark" size="1" class="form-control">
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </form>
                                <!-- //填写物流信息的表单 -->
                            </div>
                        </div>
                        <!-- //填写物流信息 -->
                        <br />
                        <!-- 显示支付方式 -->
                        <div class="row">
                            <div id="content_oc" class="col-sm-12">
                                <h1>支付方式</h1>
                                <div class="table-responsive cart-info">
                                    <table class="table table-bordered">
                                        <tbody>
                                            <tr>
                                                <td class="text-left"><img src="{{url_for('static',filename='home/images/zhifubao.png')}}" /></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <br /> <br />
                                <div class="buttons">
                                    <div class="pull-left">
                                        <a href="{{url_for('home.index')}}" class="btn btn-primary btn-default">继续购物</a>
                                    </div>
                                    <div class="pull-left">
                                        <a href="{{url_for('home.cart_clear')}}" class="btn btn-primary btn-default">清空购物车</a>
                                    </div>
                                    <div class="pull-right">
                                        <a href="javascript:zhifu();" class="tigger btn btn-primary btn-primary">结账</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- //显示支付方式 -->
                    </div>
                </div>
            </div>
            <!-- //页面主体内容 -->
        </div>
    </div>
    <!-- 使用jBox插件实现一个支付对话框 -->
    <script type="text/javascript" src="{{url_for('static',filename='home/js/jBox/jquery-1.4.2.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static',filename='home/js/jBox/jquery.jBox-2.3.min.js')}}"></script>
    <link type="text/css" rel="stylesheet" href="{{url_for('static',filename='home/js/jBox/Skins2/Pink/jbox.css')}}" />
    <script type="text/javascript">
        // 获取总额
        $(document).ready(function(){
            var total_price = 0
            $('.total').each(function(){
                total_price += parseFloat($(this).attr('value'))
            })
            $('#total_price').text(total_price+"元")
        });
        function zhifu() {
            //验证收货人姓名
            if ($('#recevieName').val() === "") {
                alert('收货人姓名不能为空！');
                return;
            }
            //验证收货人手机
            if ($('#tel').val() === "") {
                alert('收货人手机不能为空！');
                return;
            }
            //验证手机号是否合法
            if (isNaN($('#tel').val())) {
                alert("手机号请输入数字");
                return;
            }
            //验证收货人地址
            if ($('#address').val() === "") {
                alert('收货人地址不能为空！');
                return;
            }
            //设置对话框中要显示的内容
            var html = '<div class="popup_cont">'
                    + '<div style="width: 256px; height: 250px; text-align: center; margin:70px" >'
                    + '<image src="/static/home/images/qr.png" width="256" height="256" />'
                    + '<p style="color:red;padding-tope:30px">该页面仅为测试页面，并未实现支付功能</p></div>'
                    + '</div>';
            var content = {
                state1 : {
                    content : html,
                    buttons : {
                        '取消' : 0,
                        '支付' : 1
                    },
                    buttonsFocus : 0,
                    submit : function(v, h, f) {
                        if (v == 0) {//取消按钮的响应事件
                            return true; //关闭窗口
                        }
                        if (v == 1) {//支付按钮的响应事件
                            document.getElementById('myform').submit();//提交表单
                            return true;
                        }
                        return false;
                    }
                }
            };
            $.jBox.open(content, '支付', 400, 450);//打开支付窗口
        }
    </script>
    <!-- // 使用jBox插件实现一个支付对话框 -->

{% endblock %}
